<template>
  <div class="u-page-full u-page-padding">
    <!-- 搜索+工具栏 -->
    <div class="search-header">
      <!-- 搜索栏 -->
      <el-form ref="formRef" :model="formState" :inline="true">
        <!-- :label-col="{ span: 8 }"
        :wrapper-col="{ span: 8 }" -->
        <el-form-item label="模糊搜索" prop="q">
          <el-input v-model="formState.q" @keyup.enter="searchForm" />
        </el-form-item>
        <!-- :rules="[{ required: true, message: '请输入事情描述' }]" -->
        <!-- <el-form-item label="dowhat" prop="dowhat" lable-width="100px">
          <el-input v-model="formState.dowhat" />
        </el-form-item> -->
        <el-form-item>
          <div class="search-button">
            <el-button type="primary" @click="searchForm()">搜索</el-button>
            <el-button type="default" @click="resetForm()">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
      <!-- 工具栏 -->
      <div class="tool-bar">
        <el-button type="primary" size="small" @click="openModal">新增</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="search-table">
      <el-table ref="tableRef" :data="tableData" border highlight-current-row style="width: 100%">
        <template></template>
        <el-table-column
          v-for="(item, index) in columnList"
          :prop="item.dataIndex"
          :label="item.title"
          align="left"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <div class="editable-row-operations">
              <el-button type="link" @click="openModal(row)">编辑</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <operatedialog /> -->
    <testModal v-if="dialogData.visible" :dialogData="dialogData" @cancel="dialogCancel" />
    <!-- <OperateModal :handleRow="rowData" /> -->
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, UnwrapRef, getCurrentInstance } from 'vue'
// import { cloneDeep } from 'lodash'
import { getTimeLog } from '@/api/test/timelog'
import { TimeLog } from '@/@types/timelog'
// import { FormInstance } from 'ant-design-vue'
import testModal from './modules/testModal.vue'
// import operatedialog from './modules/operateDialog.vue'
// import { openModal } from '@/hooks/useModalControl'

// 控制消息弹窗
// function controlTimelog() {
//   const { openAction } = openModal('notice')
//   return { openTimelog: openAction }
// }
export default defineComponent({
  name: 'menu-manage',
  components: {
    // operatedialog,
    testModal
  },
  setup() {
    // form 相关
    interface FormState {
      q?: string | number | undefined
      // dowhat: string
    }
    // 使用 FormInstance 会报错
    // const formRef = ref<FormInstance>()

    const formRef = ref()
    const formState: UnwrapRef<FormState> = reactive({
      // dowhat: ''
      q: ''
    })

    function searchForm() {
      getTableData(formState)
    }

    function resetForm() {
      formRef.value.resetFields()
      getTableData()
    }

    // table 相关
    const columnList: any = [
      {
        title: 'id',
        dataIndex: 'id',
        key: 'id',
        center: true,
        width: 100
      },
      {
        title: '开始时间',
        dataIndex: 'start_time',
        key: 'start_time',
        width: 100
      },
      {
        title: '结束时间',
        dataIndex: 'end_time',
        key: 'end_time',
        width: 100
      },
      {
        title: '事情描述',
        dataIndex: 'dowhat',
        key: 'dowhat',
        width: 100
      },
      {
        title: '花费时间(分钟)',
        dataIndex: 'pay_for_time',
        key: 'pay_for_time',
        width: 100
      },
      {
        title: '分类',
        dataIndex: 'category',
        key: 'category',
        width: 100
      },
      {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        fixed: 'right',
        width: 100
      }
    ]
    const loading = ref<boolean>(false)
    const data: TimeLog[] = []
    const tableData = ref(data)

    /**
     * 查询表格
     * @param params FormState 可以为空
     */
    const getTableData = (params?: FormState) => {
      console.log('查询条件', params)
      getTimeLog(params)
        .then((res: any) => {
          tableData.value = res
        })
        .catch((err: any) => {
          console.log(err)
        })
    }

    // 新增/编辑 弹框
    // function handleOpenModal(row?: TimeLog) {
    //   console.log('打开窗口时的 row', row)
    // }
    // 使用封装的dialog打开方法，operateDialog组件
    // const { openTimelog } = controlTimelog()

    // 使用个人的dialog打开方法
    const dialogData = reactive({
      visible: false,
      data: {}
    })
    function openModal(row: TimeLog) {
      dialogData.visible = true
      dialogData.data = row
      console.log('新增', row)
    }

    function dialogCancel() {
      dialogData.visible = false
    }

    onMounted(() => {
      getTableData()
    })

    return {
      formRef,
      formState,
      searchForm,
      resetForm,
      loading,
      columnList,
      tableData,
      openModal,
      // openTimelog,
      dialogData,
      dialogCancel
      // editTableData
    }
  }
})
</script>

<style lang="scss" scoped>
.ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa;
}

.search-header {
  padding: 10px 0;
  // display: flex;
  // flex-direction: row;

  .search-button {
    line-height: 32px;

    button {
      margin-right: 10px;
    }
  }

  .tool-bar {
    box-sizing: border-box;
    padding: 10px 0 0;
    margin-top: 20px;
    border-top: 1px solid #d9d9d9;
  }
}
</style>
